/* 系统权限页面 */
<template>
  <zero-container v-loading="dataListLoading">
    <div slot="tool">
      <el-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                 type="primary"
                 @click="initDialog('addUpdateDialogRef')"
                 size="small">新增</el-button>
    </div>
    <!-- 右边信息-start -->
    <div slot="main"
         style="height: 100%">
      <el-table ref="tableRef"
                height="100%"
                row-key="id"
                :data="dataList"
                border
                style="width: 100%"
                :tree-props="{children: 'children'}"
                @row-dblclick="rowDblclick">
        <el-table-column prop="name"
                         label="名称"
                         min-width="120" />
        <el-table-column prop="path"
                         label="资源路径"
                         min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.cache ==='F'">{{ scope.row.path }}</span>
            <el-tooltip v-else
                        :hide-after="1000"
                        content="缓存页面"
                        placement="top"
                        show-overflow-tooltip>
              <span style="color: red">{{ scope.row.path }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="url"
                         label="接口地址"
                         min-width="150" />
        <el-table-column prop="sort"
                         label="排序"
                         align="center"
                         min-width="40" />
        <el-table-column prop="icon"
                         label="图标"
                         align="center"
                         min-width="40">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="type"
                         label="类型"
                         align="center"
                         min-width="60">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type == 'CATALOG'"
                    type="success"> 目录 </el-tag>
            <el-tag v-else-if="scope.row.type == 'MENU'"
                    type="info"> 菜单 </el-tag>
            <el-tag v-else
                    type="danger"> 权限 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime"
                         label="创建时间"
                         show-overflow-tooltip
                         min-width="180"
                         :formatter="dateFormat" />
        <el-table-column prop="remarks"
                         label="备注"
                         show-overflow-tooltip />
        <el-table-column label="操作"
                         header-align="center"
                         fixed="right"
                         width="220">
          <template slot-scope="scope">
            <el-button v-if="$hasPermission(mixinViewModuleOptions.addUrl)"
                       type="primary"
                       size="mini"
                       @click="initDialog('addUpdateDialogRef',scope.row,true)">复制</el-button>
            <el-button v-if="$hasPermission(mixinViewModuleOptions.updateUrl)"
                       type="warning"
                       size="mini"
                       @click="initDialog('addUpdateDialogRef',scope.row)">修改</el-button>
            <el-button v-if="$hasPermission(mixinViewModuleOptions.deleteUrl)"
                       type="danger"
                       size="mini"
                       @click="deleteHandle(scope.row,scope.row.name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增修改弹框 -->
      <AddUpdateForm ref="addUpdateDialogRef"
                     :addUrl="mixinViewModuleOptions.addUrl"
                     :updateUrl="mixinViewModuleOptions.updateUrl"
                     :getDataList="getDataList" />
    </div>
    <!-- 右边信息-end -->
  </zero-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
import AddUpdateForm from './components/AddUpdateForm' // 添加修改模块
export default {
  name: 'SysPower',
  mixins: [mixinViewModule],
  components: {
    AddUpdateForm
  },
  data () {
    return {
      mixinViewModuleOptions: {
        isPage: false,
        getDataListUrl: '/sysPower/tree',
        deleteUrl: '/sysPower/del',
        addUrl: '/sysPower/add',
        updateUrl: '/sysPower/update',
        exportUrl: '/sysPower/export'
      }
      // showColumns: {
      //   name: { label: '名称', show: true },
      //   path: { label: '资源路径', show: true },
      //   url: { label: '接口地址', show: true },
      //   sort: { label: '排序', show: true },
      //   icon: { label: '图标', show: true },
      //   type: { label: '类型', show: true },
      //   createTime: { label: '创建时间', show: false },
      //   remarks: { label: '备注', show: true }
      // }
    }
  },
  methods: {
    // 点击行展开和收缩table
    rowDblclick (row, event, column) {
      // 存在子集
      if (row.children) {
        this.$refs.tableRef.toggleRowExpansion(row)
      }
    }
  }
}
</script>
